<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速创建地球</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="../../../build/Cesium/Widgets/widgets.css" type="text/css" />
		<link rel="stylesheet" href="../../../build/CEarth/CEarth.css" type="text/css" />
		<link rel="stylesheet" href="../assets/plugins/layui/css/layui.css" type="text/css" />
		<style>
			.infoview{
				position: absolute;
				top: 10px;
				left: 10px;
				padding: 10px 15px;
				border-radius: 4px;
				border: 1px solid rgba(128, 128, 128, 0.5);
				color: #ffffff;
				background: rgba(0, 0, 0, 0.4);
				box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="layui-layout layui-layout-admin">
		  <div class="layui-body" id="CEarthContainer" style="top: 0rem;left: 0rem;padding-bottom:0rem">
		  </div>			
		</div>
		
		
 	 <div class="infoview">
			<table class="layui-form">
				<tr>
					<td>加载</td>
					<td style="padding-left: 0.5rem;"><input type="checkbox" checked="" lay-skin="switch"  lay-filter="switchAddAndRemove" lay-text="添加|移出"></td>
				</tr>
				<tr>
					<td>显示</td>
					<td style="padding-left: 0.5rem;"> <input type="checkbox" checked=""  lay-skin="switch" lay-filter="switchShowOrHide" lay-text="显示|隐藏"></td>
				</tr>	
 				<tr>
					<td>定位</td>
					<td style="padding-top: 8px;padding-left: 0.5rem;"><button type="button" class="layui-btn layui-btn-sm" id="locationBtn">定位</button></td>
				</tr>
			</table>
		</div>	
		
		<script src="../../../build/Cesium/Cesium.js"></script>
		<script src="../../../build/CEarth/CEarth.js"></script>
		<script src="../assets/plugins/layui/layui.js" charset="utf-8"></script>

		<script>
			layui.use(['form', 'layedit', 'laydate'], function(){
			   var $ = layui.jquery
			  ,form = layui.form
			  ,layer = layui.layer
			  ,layedit = layui.layedit
			  ,laydate = layui.laydate;
			   
			  //创建三维地球场景
			  var app = new CEarth.App('CEarthContainer', {
				scene: {
					center: {
						x:  119.301166,
						y: 26.058558,
						z: 145.08,
						heading: 3.1,
						pitch:  -22.9
					},
					showSun: true,
					showMoon: true,
					showSkyBox: true,
					showSkyAtmosphere: true,
					fog: true,
					fxaa: true,
					globe: {
						show: true,
						showGroundAtmosphere: false,
						depthTestAgainstTerrain: false,
						baseColor: '#546a53',
					},
					cameraController: {
						zoomFactor: 3.0,
						minimumZoomDistance: 1,
						maximumZoomDistance: 50000000,
						enableRotate: true,
						enableZoom: true,
					},
				},
				control: {
					baseLayerPicker: true, //basemaps底图切换按钮
					homeButton: true, //视角复位按钮
					sceneModePicker: true, //二三维切换按钮
					navigationHelpButton: true, //帮助按钮
					navigationInstructionsInitiallyVisible:false,
					fullscreenButton: true, //全屏按钮
					timeline: false, //时间轴
					animation: false, //动画部件
				},
				terrainViewModels: [{
						name: '无地形',
						iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'),
						tooltip: 'WGS84标准椭球，即 EPSG:4326',
						category: '',
						params: {
							type: 'none',
						}
					},
					{
						name: '地形服务【xyz】',
						iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/CesiumWorldTerrain.png'),
						tooltip: 'arcgis官方提供的高分辨率全球地形',
						category: '',
						params: {
							type: 'xyz',
							url: 'http://data.marsgis.cn/terrain',
						}
					}
				],
				imageryViewModels: [{
						name: '天地图影像(EPSG:3857)',
						iconUrl: '../assets/img/tdt_img.png',
						tooltip: '天地图影像(EPSG:3857)',
						type:'tdt',
						layer:'img_d',
						key:'9ae78c51a0a28f06444d541148496e36',
						show: true,
					},{
						name: '天地图电子(EPSG:3857)',
						iconUrl: '../assets/img/tdt_vec.png',
						tooltip: '天地图电子(EPSG:3857)',
						type:'group',
						layers: [
						  { name: '底图', type: 'tdt', layer: 'vec_d', key:'2a0e637a8772d92b123ee8866dee4a82'},
						  { name: '注记', type: 'tdt', layer: 'vec_z', key:'9ae78c51a0a28f06444d541148496e36'}
						],
					},{
						name: '天地图地形(EPSG:3857)',
						iconUrl: '../assets/img/tdt_ter.png',
						tooltip: '天地图地形(EPSG:3857)',
						type: 'group',
						layers: [
						  { name: '底图', type: 'tdt', layer: 'ter_d', key: '2a0e637a8772d92b123ee8866dee4a82' },
						  { name: '注记', type: 'tdt', layer: 'ter_z', key: '9ae78c51a0a28f06444d541148496e36' }
						],
					},{
						name: '天地图影像(EPSG:4326)',
						iconUrl: '../assets/img/tdt_img.png',
						tooltip: '天地图影像(EPSG:4326)',
						type: 'group',
						layers: [
						  {
							name: '底图',
							type: 'tdt',
							layer: 'img_d',
							crs: 'EPSG:4326',
							key: '2a0e637a8772d92b123ee8866dee4a82',
						  },
						  {
							name: '注记',
							type: 'tdt',
							layer: 'img_z',
							crs: 'EPSG:4326',
							key: '9ae78c51a0a28f06444d541148496e36',
						  }
						]
					},{
						name: '天地图电子(EPSG:4326)',
						iconUrl: '../assets/img/tdt_vec.png',
						tooltip: '天地图电子(EPSG:4326)',
						type: 'group',
						layers: [
						  {
							name: '底图',
							type: 'tdt',
							layer: 'vec_d',
							crs: 'EPSG:4326',
							key: '2a0e637a8772d92b123ee8866dee4a82',
						  },
						  {
							name: '注记',
							type: 'tdt',
							layer: 'vec_z',
							crs: 'EPSG:4326',
							key: '9ae78c51a0a28f06444d541148496e36',
						  }
						]
					},{
						name: '天地图地形(EPSG:4326)',
						iconUrl: '../assets/img/tdt_ter.png',
						tooltip: '天地图地形(EPSG:4326)',
						type: 'group',
						layers: [
						  {
							name: '底图',
							type: 'tdt',
							layer: 'ter_d',
							crs: 'EPSG:4326',
							key: '2a0e637a8772d92b123ee8866dee4a82',
						  },
						  {
							name: '注记',
							type: 'tdt',
							layer: 'ter_z',
							crs: 'EPSG:4326',
							key: '9ae78c51a0a28f06444d541148496e36',
						  }
						]
					}
				]
			  });
			 app.scene.light = new Cesium.DirectionalLight({ //去除时间原因影响模型颜色
					direction: new Cesium.Cartesian3(0.35492591601301104, -0.8909182691839401, -0.2833588392420772)
				  })
			   //添加移出
			  form.on('switch(switchAddAndRemove)', function(data){
					if(this.checked){
						add();
					}else{
						console.log('s=',graphicsLabel)
						let s=app.graphicsLayer.delete({
							groupId:'test',
							id:graphicsLabel.id
						}) 
						console.log('s=',s)
					}
			  });
			  
			  //定位
			  $("#locationBtn").click(function(){
				  app.graphicsLayer.focus({
					  groupId:'test',
					  id:graphicsLabel.id,
					  distance:50,
					  rotation:{
						  heading:0,
						  pitch:-90,
						  roll:0
					  }
				  });
			  });
			  
			  //添加标签
			  let graphicsLabel;
			  function add(){
				  graphicsLabel=app.graphicsLayer.add({
					  group:{
						  id:'test',
						  name:"測試"
					  },
					  graphics:{
						position:{
							x:119.301166,
							y:26.058558,
							z:0
						},
						label:{
							text:'克隆地區',
							scale:1,
							background:{
								show:true,
								color:'rgba(3, 0, 0, 0.5)',
								padding:{
									x:5,
									y:5
								}
							},
							color:'rgba(0, 255, 127, 1.0)',
							style:2,// 0-填写标签的文本，但不要勾勒轮廓（FILL） 1-概述标签的文本，但不要填写。（OUTLINE） 2-填写并标记标签文本。（FILL_AND_OUTLINE）
							font:"italic small-caps bold 30px arial,sans-serif",
							outline:{
								color:'rgba(255, 255, 0, 1.0)',
								width:10
							},
							horizontal:0, // 0-CENTER 1-LEFT (-1)-RIGHT
							vertical:0,// 0-CENTER 1-BOTTOM (-1)-TOP 2-BASELINE
							HeightReference:0,//0-NONE 1-CLAMP_TO_GROUND 2-RELATIVE_TO_GROUND
							distanceDisplay:{
								near:0,
								far:5000
							},
							translucencyByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
							scaleByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
							pixelOffsetScaleByDistance:{
								near:0,
								nearValue:1,
								far:5000,
								farValue:0
							},
						},
						properties:{
						}
					  }
				  });
			  }
			 add();
			  //显示隐藏
			form.on('switch(switchShowOrHide)', function(data){
				if(this.checked){
					app.graphicsLayer.show({
						groupId:'test',
						id:graphicsLabel.id
					},function(e){
						console.log(e)
					})
				}else{
					app.graphicsLayer.hide({
						groupId:'test',
						id:graphicsLabel.id
					},function(e){
						console.log(e)
					})
				}
			});
			 update();
			function update(){
				app.graphicsLayer.update({
				  groupId:'test',
				  id:graphicsLabel.id,
				  graphics:{
					position:{
						x:119.301166,
						y:26.058558,
						z:0
					},
					label:{
						text:'克隆地區1',
						scale:1,
						background:{
							show:true,
							color:'rgba(255, 85, 0, 0.5)',
							padding:{
								x:5,
								y:5
							}
						},
						color:'rgba(85, 0, 255, 1.0)',
						style:2,// 0-填写标签的文本，但不要勾勒轮廓（FILL） 1-概述标签的文本，但不要填写。（OUTLINE） 2-填写并标记标签文本。（FILL_AND_OUTLINE）
						font:"italic small-caps bold 30px arial,sans-serif",
						outline:{
							color:'rgba(255, 255, 0, 1.0)',
							width:10
						},
						horizontal:0, // 0-CENTER 1-LEFT (-1)-RIGHT
						vertical:0,// 0-CENTER 1-BOTTOM (-1)-TOP 2-BASELINE
						HeightReference:0,//0-NONE 1-CLAMP_TO_GROUND 2-RELATIVE_TO_GROUND
						distanceDisplay:{
							near:0,
							far:5000
						},
						translucencyByDistance:{
							near:0,
							nearValue:1,
							far:5000,
							farValue:0
						},
						scaleByDistance:{
							near:0,
							nearValue:1,
							far:5000,
							farValue:0
						},
						pixelOffsetScaleByDistance:{
							near:0,
							nearValue:1,
							far:5000,
							farValue:0
						},
					},
					properties:{
					}
				  }
				});
			}
		})
		</script>
	</body>
</html>
